<template>
  <el-form ref="form" :rules="rules" :model="currentDepart" label-width="80px" class="demo-form">
    <el-form-item label="企业名称" prop="name">
      <el-input v-model="currentDepart.name"></el-input>
    </el-form-item>
    <el-form-item label="企业编号" prop="id" v-if="currentDepart.id">
      <el-input v-model="currentDepart.id" disabled></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="pwd" >
      <el-input v-model="currentDepart.pwd"></el-input>
    </el-form-item>
    <el-form-item label="区域" v-if="adminInfo.userRole==='ADMIN'">
      <el-cascader
        :options="areaTree"
        v-model="curArea"
        :show-all-levels="false"
        :props="props"
        change-on-select
        @change="selectDepart">
      </el-cascader>
    </el-form-item>
    <el-form-item label="所属类别" prop="category">
      <depart-category-selector v-model="currentDepart.categoryName" @change="departCategoryChanged"></depart-category-selector>
    </el-form-item>
    <el-form-item label="地址" prop="address">
      <el-input v-model="currentDepart.address"></el-input>
    </el-form-item>
    <el-form-item label="联系人" prop="person">
      <el-input v-model="currentDepart.person"></el-input>
    </el-form-item>
    <el-form-item label="电话" prop="phone">
      <el-input v-model="currentDepart.phone"></el-input>
    </el-form-item>
    <el-form-item label="简介" prop="description">
      <el-input v-model="currentDepart.description"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="save('form')">保存</el-button>
      <el-button @click="back">返回</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
import { mapGetters } from "vuex";
import md5 from "js-md5";
import Status from "@/libs/status";
import { checkMobile, uniqueUsername } from "@/libs/checkRules";
import DepartCategorySelector from "@/components/depart-category-selector";
export default {
  props: {
    isClose: Boolean
  },
  created() {},
  mounted() {
    this.$watch("currentDepart", val => {
      this.curArea = [];
      this.getParentIds();
    });
  },
  computed: {
    ...mapGetters({
      adminInfo: "adminInfo",
      areaTree: "areaTree",
      currentDepart: "currentDepart"
    })
  },
  data() {
    return {
      curArea: [],
      rules: {
        name: [{ required: true, message: "请输入企业名称", trigger: "blur" }],
        pwd: [
          { required: true, message: "请输入初始密码", trigger: "blur" },
          { min: 6, max: 15, message: "长度在 6 到 15 个字符", trigger: "blur" }
        ]
      },
      props: {
        label: "name",
        value: "code",
        children: "children"
      }
    };
  },
  methods: {
    departCategoryChanged(id, name) {
      this.currentDepart.categoryId = id;
      this.currentDepart.categoryName = name;
    },
    getParentIds() {
      this.curArea.push(this.currentDepart.area);
      console.log(this.curArea);
    },
    selectDepart(value) {
      if (value) {
        this.currentDepart.area = value[value.length - 1];
      }
    },
    save(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (!this.currentDepart.id) {
            this.currentDepart.pwd = md5(this.currentDepart.pwd);
            this.$store
              .dispatch("addDepartment", this.currentDepart)
              .then(ret => {
                this.$notify({
                  title: "企业添加成功",
                  type: "success"
                });
                this.back();
              });
          } else {
            this.$store
              .dispatch("updateOneDepartments", this.currentDepart)
              .then(ret => {
                this.$notify({
                  title: "企业保存成功",
                  type: "success"
                });
                this.back();
              });
          }
        } else {
          return false;
        }
      });
    },
    back() {
      this.$emit("close");
    }
  },
  components: { DepartCategorySelector }
};
</script>
<style>
</style>
